<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="1000px" :title="drawerProps.title">
    <el-alert title="业务数量名称和类别信息存在不一致，请确认！" type="warning" class="mb-20" />

    <ProTable ref="proTable" :columns="columns" :toolButton="false" :requestApi="getList">
      <!-- 类别 -->
      <template #category="{ row }">
        <el-tooltip class="box-item" effect="dark" :content="row.content" placement="top">
          <span>{{ row.category }}</span>
        </el-tooltip>

        <el-icon color="#3370FF" class="pointer ml-10" @click="openCategoryDrawer"><EditPen /></el-icon>
      </template>

      <!-- 操作 -->
      <template #operation>
        <el-button link type="primary" @click="bindingCustomerMaterials">绑定客户材料</el-button>
      </template>
    </ProTable>
  </el-drawer>

  <!-- 绑定客户材料 -->
  <BindClientMaterials
    title="绑定客户材料"
    v-if="showBindClientMaterials"
    ref="bindClientMaterialsRef"
    @close="showBindClientMaterials = false"
  />

  <!-- 修改商标类别 -->
  <zc-trademark-category
    v-if="showTrademarkCategory"
    ref="zcTrademarkCategoryRef"
    @close="showTrademarkCategory = false"
  ></zc-trademark-category>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import BindClientMaterials from "../../ClientMaterials/BindClientMaterials.vue";
import ZcTrademarkCategory from "@/components/ZcTrademarkCategory/index.vue";

interface DrawerProps {
  title: string;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  title: ""
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

const columns = reactive([
  {
    prop: "businessName",
    label: "业务名称",
    width: 195
  },
  {
    prop: "number",
    label: "数量(个)",
    minWidth: 195,
    sortable: true
  },
  {
    prop: "category",
    label: "类别",
    minWidth: 195
  },
  {
    prop: "receivedAmount",
    label: "实收金额(元)",
    minWidth: 195
  },
  {
    prop: "operation",
    label: "操作",
    minWidth: 177,
    fixed: "right"
  }
]);

const getList = () => {
  return new Promise((resolve, reject) => {
    return resolve({
      data: {
        list: [
          {
            category: "03",
            content: `01化学原料(5个)
0101(5个) 010039碱土金属;010061氨;010066无水氨;010074睇;010082氩;
12运输工具(1个)
1201(1个) 120002火车车厢连接器;
30方便食品(1个)
3001(1个)
300010咖啡用调味品。`
          }
        ]
      }
    });
  });
};

// 绑定客户材料
const showBindClientMaterials = ref(false);
const bindClientMaterialsRef = ref();
const bindingCustomerMaterials = row => {
  showBindClientMaterials.value = true;
};

// 修改类别
const showTrademarkCategory = ref(false);
const zcTrademarkCategoryRef = ref();
const openCategoryDrawer = () => {
  showTrademarkCategory.value = true;
};

defineExpose({
  acceptParams
});
</script>
